<template>
  <AppLayout>
    <div :class="styles['exam-management']">
      <div :class="styles['page-header']">
        <h1 :class="styles['page-title']">考试管理</h1>
        <button :class="styles['add-exam-btn']" @click="showAddExamModal = true">
          <i :class="styles['btn-icon']">➕</i>
          <span>添加考试</span>
        </button>
      </div>

      <div :class="styles['filters']">
        <div :class="styles['search-box']">
          <input v-model="searchQuery" type="text" placeholder="搜索考试..." :class="styles['search-input']">
          <i :class="styles['search-icon']">🔍</i>
        </div>
        <div :class="styles['filter-options']">
          <select v-model="statusFilter" :class="styles['filter-select']">
            <option value="">所有状态</option>
            <option value="draft">草稿</option>
            <option value="published">已发布</option>
            <option value="ongoing">进行中</option>
            <option value="completed">已完成</option>
          </select>
        </div>
      </div>

      <div :class="styles['exams-table']">
        <table>
          <thead>
            <tr>
              <th>考试ID</th>
              <th>考试名称</th>
              <th>创建者</th>
              <th>状态</th>
              <th>开始时间</th>
              <th>结束时间</th>
              <th>参与人数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="exam in filteredExams" :key="exam.id">
              <td>{{ exam.id }}</td>
              <td>{{ exam.name }}</td>
              <td>{{ exam.creator }}</td>
              <td>
                <span :class="[styles['status-badge'], styles[exam.status]]">
                  {{ getStatusLabel(exam.status) }}
                </span>
              </td>
              <td>{{ formatDate(exam.startTime) }}</td>
              <td>{{ formatDate(exam.endTime) }}</td>
              <td>{{ exam.participantCount }}</td>
              <td>
                <div :class="styles['action-buttons']">
                  <button :class="[styles['action-btn'], styles['edit']]" @click="editExam(exam)" title="编辑">
                    ✏️
                  </button>
                  <button :class="[styles['action-btn'], styles['view']]" @click="viewExam(exam.id)" title="查看">
                    👁️
                  </button>
                  <button :class="[styles['action-btn'], styles['delete']]" @click="deleteExam(exam.id)" title="删除">
                    🗑️
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/admin/exam-management.module.css'

const exams = ref([])
const searchQuery = ref('')
const statusFilter = ref('')
const showAddExamModal = ref(false)

const filteredExams = computed(() => {
  return exams.value.filter(exam => {
    const matchesSearch = !searchQuery.value ||
      exam.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      exam.creator.toLowerCase().includes(searchQuery.value.toLowerCase())

    const matchesStatus = !statusFilter.value || exam.status === statusFilter.value

    return matchesSearch && matchesStatus
  })
})

const getStatusLabel = (status) => {
  const labels = {
    draft: '草稿',
    published: '已发布',
    ongoing: '进行中',
    completed: '已完成'
  }
  return labels[status] || status
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const editExam = (exam) => {
  console.log('编辑考试:', exam)
}

const viewExam = (examId) => {
  console.log('查看考试:', examId)
}

const deleteExam = (examId) => {
  if (confirm('确定要删除这个考试吗？')) {
    console.log('删除考试:', examId)
  }
}

onMounted(async () => {
  // 模拟数据
  exams.value = [
    {
      id: 1,
      name: 'Java基础考试',
      creator: '张老师',
      status: 'published',
      startTime: '2024-01-15 09:00:00',
      endTime: '2024-01-15 11:00:00',
      participantCount: 45
    },
    {
      id: 2,
      name: '数据库原理考试',
      creator: '李老师',
      status: 'ongoing',
      startTime: '2024-01-16 14:00:00',
      endTime: '2024-01-16 16:00:00',
      participantCount: 32
    }
  ]
})
</script>